<template>
  <el-aside width="260px" class="chat-list-box">
    <div class="chat-list-header">
      <!-- <el-input class="search-text" size="small" placeholder="搜索" v-model="searchText">
            <i class="el-icon-search el-input__icon" slot="prefix"> </i>
          </el-input> -->
    </div>
    <div
      v-if="loading"
      v-loading="true"
      class="chat-list-loading"
      element-loading-text="消息接收中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="#F9F9F9"
      element-loading-size="24"
    ></div>
    <el-scrollbar v-else class="chat-list-items">
      <div v-for="(chat, index) in friendsData" :key="index">
        <chat-item
          :chat="chat"
          :index="index"
          @click.native="onActiveItem(index)"
          @delete="onDelItem(index)"
          @top="onTop(index)"
        ></chat-item>
      </div>
    </el-scrollbar>
  </el-aside>
</template>

<script setup>
import { friendsData } from "../../fakedata";
import ChatItem from "./ChatItem.vue";
// import ChatBox from './components/ChatBox.vue'
// import { useChatStore } from './store/chat'

//const chatStore = useChatStore()
const searchText = ref("");
const loading = ref(false);
const onActiveItem = (index) => {
  console.log(index, "dasd");
};
const onDelItem = (index) => {
  console.log(index, "dasd");
};
const onTop = (index) => {
  console.log(index, "dasd");
};
</script>
<style lang="scss">
.chat-list-box {
  display: flex;
  flex-direction: column;
  height: 90vh;
  background: var(--im-background);

  .chat-list-header {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 8px;
  }

  .chat-list-loading {
    height: 50px;
    background-color: #eee;

    .el-icon-loading {
      font-size: 24px;
      color: var(--im-text-color-light);
    }

    .el-loading-text {
      color: var(--im-text-color-light);
    }

    .chat-loading-box {
      height: 100%;
    }
  }
}
</style>
